import React from "react";
import { Form } from "antd";
import Node from "./Node";
import blockRenderMap from "./blockRenderMap";
import { Injector, GetDataInjector } from "./injector";
import Formcontext from "./form";

const injector = new Injector(GetDataInjector);
@Form.create()
class Index extends React.Component {
  static defaultProps = {
    blockRenderMap,
    injector,
  };

  renderNode = node => {
    const { injector } = this.props;
    return(
      <Node
        key={node.key}
        node={node}
        renderMap={blockRenderMap}
        injector={injector}
      />
    );
  };

  render() {
    const { document = { nodes: [] } } = this.props.value;
    const children = document.nodes.map(this.renderNode);
    if(children.length === 0){
      return(
        <div />
      );
    }
    return (
      <Formcontext.Provider value={this.props.form}>
        <div style={{ position: "relative" }}>{children}</div>
      </Formcontext.Provider>
    );
  }
}

export default Index;
